// 倒计时(限时秒杀)
let otime_count = document.getElementsByClassName(".time_count");
let h = document.querySelector(".time_hours");
let m = document.querySelector(".time_min");
let s = document.querySelector(".time_sec");
var endTime = new Date('2022/08/22 00:00:00'); //未来时间
var timer = null;
clearInterval(timer);
timer = setInterval(countTime, 1000);

function countTime() {
    var newTime = new Date();
    var lastTime = parseInt((endTime - newTime) / 1000);
    if (lastTime >= 0) {
        var hour = parseInt(lastTime / 60 / 60 % 24);
        var min = parseInt(lastTime / 60 % 60);
        var sec = parseInt(lastTime % 60);
        h.innerHTML = hour;
        m.innerHTML = min;
        s.innerHTML = sec;
    } else {
        clearInterval(timer);
    }
}
// 倒计时(限时购)
let deadline_time = document.getElementsByClassName(".deadline_time");
let H = document.querySelector(".deadline_hours");
let M = document.querySelector(".deadline_min");
let S = document.querySelector(".deadline_sec");
var endTime2 = new Date('2022/08/22 23:12:21'); //未来时间
var timer2 = null;
clearInterval(timer2);
timer2 = setInterval(countTime2, 1000);

function countTime2() {
    var newTime2 = new Date();
    var lastTime2 = parseInt((endTime2 - newTime2) / 1000);
    if (lastTime2 >= 0) {
        var Hour1 = parseInt(lastTime2 / 60 / 60 % 24);
        var Min1 = parseInt(lastTime2 / 60 % 60);
        var Sec1 = parseInt(lastTime2 % 60);
        H.innerHTML = Hour1;
        M.innerHTML = Min1;
        S.innerHTML = Sec1;
    } else {
        clearInterval(timer2);
    }
}
// 选项卡
function tab(id) {
    var oBox = document.getElementById(id);
    var item = oBox.querySelectorAll(".item");
    var content = oBox.querySelectorAll(".content");

    // 给选项卡添加点击事件
    for (let i = 0; i < item.length; i++) {
        (function (i) {
            item[i].onclick = function () {
                // alert(this);
                for (let j = 0; j < item.length; j++) {
                    item[j].className = 'hh2';
                    content[j].className = 'hidd';
                }
                item[i].className = 'hh1';
                content[i].className = 'shouji_body w content'
            }
        })(i)
    }
}
window.onload = function () {
    tab('tab1');
    tab('tab2');
    tab('tab3');
    tab('tab4');
    tab('tab5');
    tab('tab6');
    tab('tab7');
    tab('tab8');
}


// ajax获取数据
function product() {
    let data;
    // let liList = document.querySelector(".shouji_body");
    // console.log(liList);
    let sjul = document.querySelector('.sjul');

    // 获取数据
    const getData = function () {
        return new Promise(resolve => {
            let xhr = new XMLHttpRequest;
            xhr.open("GET", "../sj.json");
            xhr.onreadystatechange = () => {
                let {
                    readyState,
                    status,
                    responseText
                } = xhr;
                if (readyState === 4 && status === 200) {
                    // console.log(xhr.response);
                    data = JSON.parse(responseText);
                    // console.log(data);
                    resolve(data);
                }
            }
            xhr.send();
        });
    };

    // 图片懒加载
    obImg = null; //关于图片懒加载的监听器
    const lazyImg = function lazyImg(picBox) {
        let imgBox = picBox.querySelector('img'),
            trueImg = imgBox.getAttribute('data-image'),
            tempImg = new Image;
        tempImg.src = trueImg;
        tempImg.onload = () => {
            imgBox.src = trueImg;
            imgBox.style.opacity = 1;
        }
    };
    obImg = new IntersectionObserver((changes) => {
        changes.forEach(item => {
            let {
                isIntersecting,
                target
            } = item;
            if (isIntersecting) {
                lazyImg(target);
                obImg.unobserve(target);
            }
        });

    }, {
        threshold: [1]
    });

    (async function render() {
        let value = await getData();
        // console.log("请求成功", value);
        let str = ``;
        // console.log(data);

        value.forEach(item => {
            let {
                id,
                img,
                title,
                des,
                price,
                del_price
            } = item;
            let term = document.createElement('li');
            term.innerHTML = `
            <div class = "pic-box">
            <img src="" data-image = "${img}" alt="" >
            </div>
            <div class="shouji_bd">
                <div class="shouji_title con_title">${title}</div>
                <span class="shouji_des con_sl">${des}</span>
        <div class=" shouji_pirce con_pri">￥${price}<del class="con_del">${del_price}</del></div>
                <div class="last_des">直降400元 | 赠66W充电器</div>
            </div>
        `
            sjul.appendChild(term);

            // 每插入一项,就把其内部的pic-box放在监听器中监听
            // console.log(sjul.querySelector('.pic-box'));

            obImg.observe(term.querySelector('.pic-box'));
        });
        // console.log(sjul);

    })();



};
product();

//返回顶部
let backTop = document.querySelector(".back-top");
let ch = document.documentElement.clientHeight;
window.onscroll = function () {
    let CrimpHeight = document.documentElement.scrollTop;
    if (CrimpHeight > ch) {
        backTop.style.display = "block";
    } else {
        backTop.style.display = "none";
    }
};

backTop.onclick = function () {
    if (this.isgoing) return;
    this.isgoing = true;
    let t = document.documentElement.scrollTop;
    let step = t / 100; //2000/100=20
    let timer = setInterval(() => {
        t -= step; //step=20
        if (t < 0) {
            t = 0;
            clearInterval(timer);
            this.isgoing = false;
        }
        document.documentElement.scrollTop = t;
    }, 1);
};